"use client";
import React from "react";
import {Flex, Group, TextInput, Button, Paper, Select, Collapse} from "@mantine/core";
import {useForm} from "@mantine/form";
import {FilterProps} from "./interface";
import {useIpdTableContext} from "./context";

const INPUT_STYLE = {flex: "1 1 150px"};
const INPUT_SIZE = "xs";
const INPUT_RADIUS = "sm";

export function Filter() {
  const {
    PAGE_SIZES,
    EMPTY_FILTER,
    DEFAULT_SORT,
    filter,
    sortStatus,
    setFilter,
    setPage,
    setPageSize,
    setSortStatus,
  } = useIpdTableContext();
  // 从context中获取collapse，无需获取setCollapse
  const {collapse} = useIpdTableContext();

  // 使用mantine的useForm Hook，将表单初始值设置成context给定的初始值
  const form = useForm<FilterProps>({
    mode: "controlled",
    initialValues: filter,
  });

  function handleSubmit(filter: FilterProps) {
    setFilter(filter);
    setPage(1);
    setPageSize(PAGE_SIZES[1]);
    setSortStatus(DEFAULT_SORT);
  }

  function handleClearFilter() {
    form.reset();
    setFilter(EMPTY_FILTER);
    setPage(1);
    setPageSize(PAGE_SIZES[1]);
    setSortStatus(DEFAULT_SORT);
  }

  return (
    <Collapse in={collapse}>
      <Paper withBorder radius="sm" p="sm">
        <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
          <Flex direction="column">
            <Flex direction="row" gap="xs" wrap="wrap">
              <Select
                label="项目类型"
                variant="filled"
                size={INPUT_SIZE}
                radius={INPUT_RADIUS}
                placeholder="请选择项目类型"
                style={INPUT_STYLE}
                data={["个人项目", "工程项目"]}
                key={form.key("type")}
                {...form.getInputProps("type")}
              />
              <TextInput
                label="项目名称"
                variant="filled"
                size={INPUT_SIZE}
                radius={INPUT_RADIUS}
                placeholder="请输入项目名称"
                style={INPUT_STYLE}
                key={form.key("name")}
                {...form.getInputProps("name")}
              />
              <TextInput
                label="大生产项目编号（工程）"
                variant="filled"
                size={INPUT_SIZE}
                radius={INPUT_RADIUS}
                placeholder="请输入大生产项目编号"
                style={INPUT_STYLE}
                key={form.key("oaId")}
                {...form.getInputProps("oaId")}
              />
              <Select
                label="状态"
                variant="filled"
                size={INPUT_SIZE}
                radius={INPUT_RADIUS}
                placeholder="请选择项目状态"
                style={INPUT_STYLE}
                data={["设计中", "审核中", "已结束", "已作废"]}
                key={form.key("state")}
                {...form.getInputProps("state")}
              />
              <TextInput
                label="创建人"
                variant="filled"
                size={INPUT_SIZE}
                radius={INPUT_RADIUS}
                placeholder="请输入创建人姓名"
                style={INPUT_STYLE}
                key={form.key("createdByUserName")}
                {...form.getInputProps("createdByUserName")}
              />
              <TextInput
                label="执行人"
                variant="filled"
                size={INPUT_SIZE}
                radius={INPUT_RADIUS}
                placeholder="请输入执行人姓名"
                style={INPUT_STYLE}
                key={form.key("executedByUserName")}
                {...form.getInputProps("executedByUserName")}
              />
              <TextInput
                label="审核人"
                variant="filled"
                size={INPUT_SIZE}
                radius={INPUT_RADIUS}
                placeholder="请输入审核人姓名"
                style={INPUT_STYLE}
                key={form.key("reviewedByUserName")}
                {...form.getInputProps("reviewedByUserName")}
              />
            </Flex>

            <Flex justify="flex-end" mt="md">
              <Group gap="xs">
                <Button
                  size={INPUT_SIZE}
                  variant="default"
                  radius={INPUT_RADIUS}
                  onClick={handleClearFilter}
                >
                  清空
                </Button>
                <Button color="violet.1" size={INPUT_SIZE} radius={INPUT_RADIUS} type="submit">
                  筛选
                </Button>
              </Group>
            </Flex>
          </Flex>
        </form>
      </Paper>
    </Collapse>
  );
}
